<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="!view ? '预警处置' : '预警查看'"
    width="900px"
    class="handle-dialog"
    :visible.sync="visible"
  >
    <el-form label-suffix="：" :disabled="view" :model="form" ref="form" label-width="130px">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="科室">{{ form.dept_name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="科室收入">{{ form.total_cost }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="材料收入">{{ form.material_cost }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="超出金额">{{ form.cost_diff }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标准值">{{ form.standard }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警规则" prop="ruleName">
            <el-input v-model="form.ruleName" :readOnly="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预警时间" prop="dataTime">
            <span>{{ form.dataTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否违规" prop="violateFlag">
            <el-select :readOnly="true" :disabled="true" v-model="form.violateFlag">
              <el-option label="正常" :value="0" />
              <el-option label="违规" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考评标准" prop="evalItemId">
            <el-select
              clearable
              @change="handleEvalChange"
              v-model="form.evalItemId"
              placeholder="请选择"
            >
              <el-option
                v-for="(item,index) in warningRuleEvals"
                :key="index"
                :label="item.evalItemName"
                :value="item.evalItemId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标准内容">{{ form.evalItemContent }}</el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="得分扣分说明">{{ form.standard }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评分规则">{{ form.standard }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标准分值">{{ form.rewardStandard }}</el-form-item>
        </el-col>
        <el-col
          :span="12"
          v-show="form.evalItemId && form.evalItemId !== 0 && form.evalItemId !== 1"
        >
          <el-form-item label="奖惩形式">
            <template
              v-if="form.rewardType !== 3"
            >{{ form.rewardType === 1 ? '奖' : '扣' }}{{ form.rewardOrientation === 1 ? '分' : '钱' }}</template>
            <template v-else>
              <el-radio-group v-model="form.rewardType">
                <el-radio :label="1">奖</el-radio>
                <el-radio :label="2">惩</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
        <template v-if="!view">
          <el-button
            v-show="form.evalItemId && form.evalItemId !== 0 && form.evalItemId !== 1"
            class="mb20 ml27"
            @click="handleAddCol"
            :disabled="view"
          >追加责任人</el-button>
          <el-col>
            <el-row :gutter="16" v-for="(item,index) in colObj" :key="index">
              <el-col
                :span="10"
                v-show="form.evalItemId && form.evalItemId !== 0 && form.evalItemId !== 1"
              >
                <el-form-item label="责任方" prop="targetId">
                  <el-radio-group
                    v-model="item.typeRadio"
                    @change="e => handleTypeChange(e,index)"
                    size="mini"
                  >
                    <el-radio-button label="0">科室</el-radio-button>
                    <el-radio-button label="1">个人</el-radio-button>
                  </el-radio-group>
                  <dept-user
                    v-if="item.typeRadio === '1'"
                    :disabled="view"
                    ref="deptUser"
                    :selectValue="item.targetId"
                    @select="e => handleSelectUser(e, item, 'user')"
                  />
                  <dept-select
                    v-else
                    :disabled="view"
                    ref="deptSelect"
                    :selectValue="item.targetId"
                    @select="e => handleSelectUser(e, item, 'dept')"
                  />
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-show="form.evalItemId && form.evalItemId !== 0 && form.evalItemId !== 1"
              >
                <el-form-item class="reward-item" label="奖惩值" prop="rewardValue">
                  <el-input
                    :min="0"
                    :disabled="view"
                    v-model="item.rewardValue"
                    type="number"
                    placeholder="请输入奖惩值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" class="radio-col">
                <el-radio-group v-model="item.rewardOrientation">
                  <!-- 奖的情况，加分时，既可加分又可奖钱。奖钱时，只能奖钱 -->
                  <template v-if="form.rewardType ===1 && form.rewardOrientation === 1">
                    <el-radio :label="1" v-show="reward">加分</el-radio>
                    <el-radio :label="2" v-show="reward">奖钱</el-radio>
                  </template>
                  <template v-if="form.rewardType ===1 && form.rewardOrientation === 2">
                    <el-radio :label="2" v-show="reward">奖钱</el-radio>
                  </template>
                  <template v-if="form.rewardType ===2 && form.rewardOrientation === 1">
                    <el-radio :label="1" v-show="reward">扣分</el-radio>
                    <el-radio :label="2" v-show="reward">罚钱</el-radio>
                  </template>
                  <template v-if="form.rewardType ===2 && form.rewardOrientation === 2">
                    <el-radio :label="2" v-show="reward">罚钱</el-radio>
                  </template>
                </el-radio-group>
              </el-col>
              <el-col :span="2">
                <el-button
                  :disabled="view"
                  v-show="form.evalItemId && form.evalItemId !== 0 && form.evalItemId !== 1"
                  class="ml10"
                  @click="handleRemoveCol(item)"
                  size="mini"
                  icon="el-icon-minus"
                />
              </el-col>
            </el-row>
          </el-col>
        </template>
        <template v-else>
          <e-table
            class="mb20"
            :tableData="tableData"
            :loading="loading"
            :columns="columns"
            :pageObj="null"
          >
            <el-table-column slot="rewardType" label="奖惩形式" align="center">
              <template
                slot-scope="scope"
              >{{ scope.row.rewardType === 1 ? '奖' : '扣' }} {{ scope.row.rewardOrientation === 1 ? '分' : '钱' }}</template>
            </el-table-column>
          </e-table>
        </template>
        <el-col>
          <el-form-item label="处置意见" prop="handleRemark">
            <el-input
              :disabled="view"
              type="textarea"
              :rows="2"
              placeholder="请输入处置意见"
              v-model="form.handleRemark"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row v-if="handle || ( view && form.handleState )">
      <el-col class="flex">
        <span style="margin-left: 22px" class="mr10">上报审核意见：</span>
        <el-input
          :disabled="!handle && view"
          style="width: 680px"
          type="textarea"
          :rows="2"
          placeholder="请输入处置意见"
          v-model="reportedRemark"
        />
      </el-col>
    </el-row>

    <template v-if="handle">
      <div slot="footer">
        <el-button type="danger" @click="handleAudit(2)">审核不通过</el-button>
        <el-button type="primary" @click="handleAudit(3)">审核通过</el-button>
      </div>
    </template>
    <template v-else>
      <div slot="footer" v-if="!view">
        <el-button @click="visible = false">取消</el-button>
        <el-button @click="handleOk" type="primary" :loading="confirmLoading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { insertArea, updateArea } from '@/api/department'
import { openNotification } from '@/utils/util'
import DeptUser from '@/components/DeptUserS'
import DeptSelect from '@/components/DeptSelect'
import { handleWarning, warningAudit } from '@/api/prewarning'

export default {
  components: {
    DeptUser,
    DeptSelect
  },
  data() {
    return {
      reward: true,
      remark: null,
      colObj: [{ specialId: 1, targetId: null, rewardValue: null, typeRadio: '1' }],
      visible: false,
      form: {
        handleRemark: null
      },
      warningRuleEvals: [],
      confirmLoading: false,
      selectedRows: [],
      single: null,
      view: null,
      loading: false,
      tableData: [],
      columns: [
        {
          label: '责任方',
          prop: 'targetName'
        },
        {
          label: '奖惩值',
          prop: 'rewardValue'
        },
        { slot: 'rewardType' }
      ],
      handle: false,
      reportedRemark: null
    }
  },
  methods: {
    handleTypeChange(e, index) {
      this.colObj[index].targetId = null
    },
    handleAddCol() {
      this.colObj.push({
        specialId: this.colObj.length + 1,
        targetId: null,
        rewardValue: null,
        typeRadio: '1'
      })
      console.log('length', this.colObj, this.colObj.length, this.colObj[this.colObj.length])
      if (this.form.rewardOrientation === 2) {
        if (this.form.rewardType === 1 || this.form.rewardType === 2) {
          this.$set(this.colObj[this.colObj.length - 1], 'rewardOrientation', 2)
        }
      }
    },
    handleRemoveCol(item) {
      const index = this.colObj.findIndex(v => v.specialId === item.specialId)
      this.colObj.splice(index, 1)
    },
    reset() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.colObj = [{ specialId: 1, targetId: null, rewardValue: null }]
      })
    },
    handleSelectUser(value, item, type) {
      // targetMode 科室1 个人 2
      console.log('value', value)
      const index = this.colObj.findIndex(v => v.specialId === item.specialId)
      this.colObj[index].targetId = value.key
      this.colObj[index].targetMode = type === 'dept' ? 1 : 2
    },
    handleEvalChange(e) {
      console.log('e', e)
      if (e === 0) {
        this.$set(this.form, 'violateFlag', 0)
        this.$set(this.form, 'evalItemContent', '正常考评选择项')
        this.$set(this.form, 'standard', '正常考评选择项')
        this.$set(this.form, 'rewardStandard', 0)
      } else if (e === 1) {
        this.$set(this.form, 'violateFlag', 1)
        this.$set(this.form, 'evalItemContent', '违规考评选择项')
        this.$set(this.form, 'standard', '违规考评选择项')
        this.$set(this.form, 'rewardStandard', 0)
      } else {
        const index = this.warningRuleEvals.findIndex(v => v.evalItemId === e)
        const obj = this.warningRuleEvals[index]
        console.log('obj', obj)
        if (obj.rewardType !== 3) {
          if (obj.rewardType === 1) {
            // 1 奖， 则为正常
            this.$set(this.form, 'violateFlag', 0)
          } else {
            // 2 惩，则为违规
            this.$set(this.form, 'violateFlag', 1)
          }
        } else {
          this.$set(this.form, 'violateFlag', null)
        }
        this.form = Object.assign(this.form, obj)
        this.$set(this.form, 'saveRewardType', obj.rewardType)
        if (this.form.rewardOrientation === 2) {
          if (this.form.rewardType === 1 || this.form.rewardType === 2) {
            this.$set(this.colObj[this.colObj.length - 1], 'rewardOrientation', 2)
            this.$set(this.colObj[this.colObj.length - 1], 'typeRadio', '1')
          }
        }
        // this.$set(this.form, 'remark', null)
      }
    },
    edit(firstRow, arr, record, single = true, selectedRows = [], view = false, handle = false) {
      console.log('edit', firstRow, arr, record, single, selectedRows, view)
      this.handle = handle // 处置传值
      this.view = view
      this.single = single
      this.selectedRows = selectedRows
      this.warningRuleEvals = []
      this.colObj = [{ specialId: 1, targetId: null, rewardValue: null }]
      if (arr && arr.length > 0) {
        this.warningRuleEvals = [...arr]
      }
      this.warningRuleEvals.unshift({
        evalItemId: 0,
        evalItemName: '正常'
      })
      if (arr.length === 0) {
        this.warningRuleEvals.push({
          evalItemId: 1,
          evalItemName: '违规'
        })
      }
      if (single) {
        // 单个处置,拿单个dataId
        this.form = Object.assign({}, firstRow, record)
      } else {
        // 批量处置
        this.form = Object.assign({}, firstRow)
      }
      console.log('form', this.form)

      if (this.view) {
        // 回显数据处理
        if (record.warningEvalNotes && record.warningEvalNotes.length > 0) {
          console.log('warningRuleEvals', record, record.warningEvalNotes)
          this.$set(this.form, 'evalItemId', record.warningEvalNotes[0].evalItemId)
          this.$set(this, 'remark', record.warningEvalNotes[0].warningRemark)
          this.colObj = []
          record.warningEvalNotes.map((v, i) => {
            this.colObj.push({
              specialId: Number(i + 1),
              targetId: v.targetId,
              rewardValue: v.rewardValue
            })
          })
          this.tableData = [...record.warningEvalNotes]
        } else {
          if (record.violateFlag) {
            this.$set(this.form, 'evalItemId', 1)
          } else {
            this.$set(this.form, 'evalItemId', 0)
          }
        }
        this.handleEvalChange(this.form.evalItemId)

        if (this.form.handleState) {
          this.reportedRemark = this.form.reportedRemark
        }
      }

      this.visible = true
    },
    async handleOk(e) {
      e.stopPropagation()
      this.confirmLoading = true
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 正常和违规的一般处置 / 考评项的处置
          // 单个处置和批量处置
          // 不管是正常还是考评项的处置都会有单独和批量处置所以这里不用判断
          // console.log('form', this.form)
          let res = ''
          let commit = true
          if (this.form.evalItemId !== 0 && this.form.evalItemId !== 1) {
            this.colObj.map(v => {
              v.rewardType = this.form.rewardType
              if (v.targetId && v.rewardValue) {
                commit = true
              } else {
                commit = false
                return false
              }
            })
            // this.$set(this.form, 'warningRemark', this.remark)
            this.$set(this.form, 'rewardArr', this.colObj)
          }
          if (commit) {
            console.log('form', this.form)
            if (!this.single) {
              // 批量处置
              this.selectedRows.map(v => {
                v.evalItemId = this.form.evalItemId
                v.violateFlag = this.form.violateFlag
              })
              console.log('selectedRows', this.selectedRows)
              res = await handleWarning(this.selectedRows)
            } else {
              res = await handleWarning([this.form])
            }
            if (res.state === '000000') {
              openNotification('success', '处置操作成功')
              this.visible = false
              this.$emit('refresh')
            }
          } else {
            this.$message.error('请选择责任方并填写奖惩值')
          }
        }
      })
      this.confirmLoading = false
    },
    // 审核
    handleAudit(handleState) {
      if (handleState === 2) {
        if (!this.reportedRemark) {
          this.$message.error('审核不通过时，请输入上报审核意见')
          return false
        }
      }
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.$set(this.form, 'reportedRemark', this.reportedRemark)
          console.log('form', this.form)
          const res = await warningAudit({ ...this.form, handleState })
          if (res.state === '000000') {
            let mes = ''
            if (handleState === 2) {
              mes = '审核不通过操作成功'
            } else {
              mes = '审核通过操作成功'
            }
            openNotification('success', mes)
            this.visible = false
            this.$emit('refresh')
            this.reportedRemark = null
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.ml27 {
  margin-left: 27px;
}
.radio-col >>> .el-radio-group {
  margin-top: 12px;
}
.radio-col >>> .el-radio {
  margin-right: 6px;
}
.radio-col >>> .el-radio:last-child {
  margin-right: 0;
}
</style>

